<template>
  <div>
    <Nav/>
    <div class="bgimg">
      <img class="imgbg" src="@/assets/images/index/contentbg.png">
      <div class="contentbox">
        <div class="content1">
          <div class="titlebox">
            <div class="title">Referral</div>
            <LinkToken/>
          </div>
          <div class="img1box">
            <img src="@/assets/images/index/centent1img.png">
          </div>
          <div class="content">
            <div class="text">
              Share your referral link with your friends and earn extra reward for each reward they receive.
            </div>
            <div v-if="isShow" class="invitebox">
              <div class="intitle">
                Your Invitation Link:
              </div>
              <div @click="copylink(invitelink)" class="link">
                {{ invitelink }}
              </div>
            </div>
            <div v-else class="loading">
              <van-skeleton title :row="3"/>
            </div>
          </div>
        </div>
        <div class="content2">
          <div class="titlebox">
            <div class="title">Referral Rewards</div>
          </div>

          <div class="content">
            <div v-if="isShow">
              <div class="th">
                <div>Date</div>
                <div>
                  ETH Reward
                </div>
              </div>
              <div v-for="item in list" class="tr">
                <div>{{item.create_time}}</div>
                <div>
                  {{ float_format(item.row)}}
                </div>
              </div>
            </div>
            <div v-else class="loading">
              <van-skeleton title :row="3"/>
            </div>
          </div>
        </div>
      </div>
      <div class="flooter">
        Copyright © 2025
        <span class="span">Liquidity Farming</span>
      </div>
    </div>
    <!-- 底部弹出 -->
    <Tabber :tab="tab"/>
    <!--    <GetToken :showBottom="showBottom" :next="next" @close="close" @next1="next1()" @first="first()"/>-->
  </div>

</template>
<script>

import GetToken from "@/components/getToken.vue";
import Nav from "@/components/nav.vue";
import {mapState} from "vuex"
import {showNotify} from "vant";
import {fryInviteRecord} from "@/api/user.js"
import {fix2} from "@/utils/fliters.js";
import {float_format} from "../../utils/fliters.js";
export default {
  data() {
    return {
      tab: 5,
      showBottom: false,
      next: false,
      page: 1,
      list: []
    }
  },
  watch:{
    'token' :{
      handler(val){
        if(val){
          this.getlist()
        }
      },immediate:true
    }
  },
  components: {
    Nav,
    GetToken
  },
  computed: {
    ...mapState('user', ['isShow', 'account','token']),
    ...mapState('home',['web_url']),
    invitelink() {
      return this.web_url + '/?code=' + this.account.uuid
    }
  },
  mounted() {
    // this.getlist()
  },
  methods: {
    float_format,
    fix2,
    getlist() {
      fryInviteRecord({page: this.page}).then(res => {
        this.list=res.list
      })
    },
    copylink(text) {
      navigator.clipboard.writeText(text).then(res => {
        showNotify({
          type: 'success',
          message: 'Text copied to clipboard',
          duration: 2000
        })
      }).catch(e => {
        showNotify({
          type: 'danger',
          message: 'Copy Failure',
          duration: 2000
        })
      })
    },
    close() {
      this.showBottom = false
    },
    next1() {
      this.next = true;
    },
    first() {
      this.next = false;
    }
  }
}
</script>
<style scoped>
.bgimg {
  position: relative;
}

.bgimg .imgbg {
  position: absolute;
  width: 100%;
  height: 40vh;
  top: 180px;
}

.contentbox {
  padding: 0 10px;
  position: relative;
}

.titlebox {
  display: flex;
  align-items: center;
  padding: 10px 0 15px 5px;
}

.titlebox .title {
  color: rgb(41, 74, 224);
  font-family: Josefin Sans, Serif;
  font-weight: 700;
  font-size: 28px;
}


.img1box {
  text-align: center;
}

.img1box img {
  width: 104px;
  height: 137px;
}

.content1 .content {
  box-shadow: -10px -10px 10px 8px rgba(227, 230, 255, .25);
  padding: 13px;
  border-radius: 32px;
  background: white;
}

.content1 .invitebox {
  margin-top: 20px;
}

.content1 .invitebox .intitle {
  color: black;
  font-weight: 900;
}

.content1 .invitebox .link {
  color: black;
  font-size: 15px;
  padding-top: 2px;
  padding-bottom: 8px;
}

.content1 .content .text {
  font-size: 14px;
}

.loading {
  padding-top: 10px;
}

.loading .van-skeleton {
  padding: 0px;
}

.content2 .titlebox {
  background: none;
  padding: 52px 0 13px 0;
}

.content2 .content {
  box-shadow: -10px -10px 10px 8px rgba(227, 230, 255, .25);
  padding: 13px;
  border-radius: 32px;
  background: white;
}

.content2 .content .th {
  color: black;
  display: flex;
  justify-content: space-between;
  font-weight: 900;
  padding: 5px;
}

.content2 .content .tr {
  display: flex;
  justify-content: space-between;
  padding: 5px;
  min-height: 20px;
}

.flooter {
  height: 48px;
  text-align: center;
  line-height: 48px;
  margin-top: 5px;
  padding-bottom: 50px;
  padding-top: 50px;
  background: white;
}

.flooter .span {
  color: rgb(41, 74, 224 / var(--tw-text-opacity));
}
</style>